<template>
  <div class="lgo-con">
    <a-range-picker @change="onChange" v-model="date" value-format="timestamp" style="width: 100%; marginbottom: 20px" />
    <a-scrollbar style="height: 300px; overflow: auto">
      <div class="mt10">
        <div class="item mt10 mb10" v-if="list.length > 0" v-for="(item, index) of list" :key="index">
          <div class="top">
            <a-space>
              <div>{{ item.createUname }}</div>
              <div class="time">{{ $setTime(item.gmtCreate) }}</div>
            </a-space>
          </div>
          <div class="bottom">
            <span>{{ item.eventName }}</span>
            <span v-if="item.eventName === '拒绝接单'">：{{ getText(item) }}</span>
          </div>
        </div>
        <a-empty v-else description="暂无日志信息" />
      </div>
    </a-scrollbar>
  </div>
</template>

<script lang="ts" setup>
  import { defineComponent, ref, onMounted } from 'vue'
  import { findTaskLogPage } from '@/api/task'
  const props = defineProps(['info'])
  let date = ref([new Date().valueOf() - 7 * 24 * 60 * 60 * 1000, new Date().valueOf()])
  let list: any = ref([])
  const onChange = (value: any) => {
    getList(props.info.id)
  }
  const getList = async (id: string) => {
    let params = {
      billId: id,
      pageSize: 200,
      pageNum: 1,
      dataType: 'gmtCreate',
      startDate: date.value[0],
      endDate: date.value[1] + 24 * 60 * 60 * 1000,
    }
    const res: any = await findTaskLogPage(params)
    if (res) {
      list.value = res?.data?.records || []
    }
  }

  const getText = (info: any) => {
    let afterData = JSON.parse(info.afterData)
    return afterData.takeRejectReason
  }

  defineExpose({ getList })
</script>

<style lang="less" scoped>
  .lgo-con {
    padding: 0 5px;

    .item {
      .top {
        font-size: 12px;
        .head-portrait {
          width: 20px;
          height: 20px;
          text-align: center;
          line-height: 20px;
          color: black;
          background-color: #d3d3d4;
          border-radius: 50%;
        }
        .time {
          color: #7f7f7f;
        }
      }
    }
  }
</style>
